<template>
  <div class="main-estimate">
    <div class="column">
      <div
        :class="[
          'column-part',
          'thumb',
          detailName === 'all' ? 'sel' : 'nosel',
        ]"
        @click="() => (detailName = 'all')"
      >
        全部评价
      </div>
      <div
        :class="[
          'column-part',
          'thumb',
          detailName === 'img' ? 'sel' : 'nosel',
        ]"
        @click="() => (detailName = 'img')"
      >
        有图
      </div>
      <div
        :class="[
          'column-part',
          'thumb',
          detailName === 'bad' ? 'sel' : 'nosel',
        ]"
        @click="() => (detailName = 'bad')"
      >
        差评
      </div>
    </div>
    <div class="estimate-container">
      <div class="estimate-part" v-for="(item, index) in evaluate">
        <div class="top">
          <div class="top-left"><img v-lazy="item.avatar" /></div>
          <div class="top-right">
            <div class="right-top">
                <span>{{ item.nickName }} </span>
                <div class="top-star" >
               <img :src="publicUrl(`/images/heart.png`)" v-for=" index of  item.star" />
               <img :src="publicUrl(`/images/heart-black.png`)" v-for="index of (5-item.star)"  />
              </div>
            </div>
            <span>{{ item.create_time }}</span>
          </div>
          
        </div>
        <div class="message">
          {{ item.content }}
        </div>
        <div class="imgArr" v-show="item.img.length > 0">
          <div class="img" v-for="items in item.img">
            <Image :img-url="items" :showDelete="false" />
          </div>
        </div>
        <div :class="['dir', evaluate.length !== index + 1 ? 'border' : '']" ></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import { publicUrl } from "@/utils/util";
import Image from "@/components/Image/index.vue";
interface Evaluate {
  nickName: string;
  avatar: string;
  create_time: string;
  content: string;
  star:number;
  img: Array<string>;
}
const detailName = ref<"all" | "img" | "bad">("all");

const evaluate = ref<Array<Evaluate>>([
  {
    nickName: "azazaz",
    avatar: publicUrl(`/images/storeImg.png`),
    create_time: "2023-03-06",
    content: "质量特别好，很厚实，品质好，太满意了",
    img: [],
    star:4
  },
  {
    nickName: "天凯网络科技有限公司",
    avatar: publicUrl(`/images/storeImg.png`),
    create_time: "2023-03-06",
    content:
      "商品质量：质量很好，物美价廉。有需要的亲们可以放心购买。 质量很好，物美价廉。有需要的亲们可以放心购买。 质量很好，物美价廉。有需要的亲们可以放心购买。 质量很好，物美价廉。有需要的亲们可以放心购买。",
    img: [
      publicUrl(`/images/Special1.png`),
      publicUrl(`/images/Special2.png`),
      publicUrl(`/images/Special3.png`),
      publicUrl(`/images/Special4.png`),
      publicUrl(`/images/Special5.png`),
      publicUrl(`/images/Special6.png`),
    ],
    star:2
  },
]);
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
